<!-- 首页 -->
<template>
  <view class="box-sizing-b wh-full bg-main">
    <van-grid class="margin-top" :border="false" :icon-size="30">
      <template v-if="approveCount.todo > 0">
        <van-grid-item
          icon="todo-list-o"
          :badge="approveCount.todo > 99 ? `99+` : approveCount.todo"
          text="待我处理"
          @click="to_page(ApproveTypeEnum.UNDO)"
        />
      </template>
      <template v-else>
        <van-grid-item icon="todo-list-o" text="待我处理" @click="to_page(ApproveTypeEnum.UNDO)" />
      </template>

      <van-grid-item icon="completed-o" text="我已处理" @click="to_page(ApproveTypeEnum.DONE)" />

      <van-grid-item icon="manager-o" text="我发起的" @click="to_page(ApproveTypeEnum.SUBMIT)" />

      <van-grid-item icon="guide-o" text="抄送我的" @click="to_page(ApproveTypeEnum.CC)" />
    </van-grid>

    <van-tabs v-model:active="activeGroup" scrollspy sticky style="margin-top: 20rpx">
      <van-tab
        v-for="(group, index) in groupModel"
        :title="group.name"
        :name="group.id"
        :key="index"
      >
        <van-collapse v-model="activeCollapse" style="width: 97%; margin: 0 auto">
          <van-collapse-item :name="group.id" :border="false">
            <template #title>
              <view class="fs fwb"> {{ group.name }} </view>
            </template>
            <van-grid :column-num="4" :border="false">
              <van-grid-item
                v-for="(model, i) in group.items"
                :key="i"
                icon="photo-o"
                @click="to_form(model)"
              >
                <template #text>
                  <view class="grid_text van-multi-ellipsis--l2"> {{ model.formName }}</view>
                </template>
                <template #icon>
                  <span
                    :class="[JSON.parse(model.logo).icon, 'padding-xs', 'border-radius']"
                    :style="analysisStyle(model.logo)"
                  ></span>
                </template>
              </van-grid-item>
            </van-grid>
          </van-collapse-item>
        </van-collapse>
      </van-tab>
    </van-tabs>

    <van-back-top bottom="100" />
  </view>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { onLoad, onPullDownRefresh, onShow } from '@dcloudio/uni-app';
  import { getGroupModelsByUser } from '@/services/api/group';
  import { ResultEnum } from '@/enums/httpEnum';
  import { Toast } from '@/utils/uniapi/prompt';
  import { getApproveCount } from '@/services/api/process';
  import { ApproveCountModel } from '@/services/model/approveModel';
  import { GroupModel, WflowModel } from '@/services/model/groupModel';
  import { router } from '@/utils/router';
  import config from '@/utils/config';
  import { ApproveTypeEnum } from '@/enums/approveEnum';
  import { isEmpty } from '@/utils/is';

  /** 审批数量 */
  const approveCount = reactive<ApproveCountModel>({
    todo: 0,
    finished: 0,
    mySubmited: 0,
    cc: 0,
  });
  /** 选中标签值 */
  const activeGroup = ref<number>(0);
  /** 表单分组 */
  const groupModel = ref<GroupModel[]>([]);
  /** 折叠面板 */
  const activeCollapse = ref<number[]>([]);

  /** 加载数据 */
  const loadData = async (callback: Function) => {
    // 加载审批数量
    await getApproveCount().then(({ data }) => {
      if (data.code == ResultEnum.SUCCESS) {
        Object.assign(approveCount, data.data);
      } else {
        Toast(data.msg);
      }
    });
    // 加载表单分组
    await getGroupModelsByUser().then(({ data }) => {
      if (data.code == ResultEnum.SUCCESS) {
        activeCollapse.value = data.data.map((item) => item.id);
        groupModel.value = data.data;
        activeGroup.value = groupModel.value[0].id;
      } else {
        Toast(data.msg);
      }
    });
    await callback();
  };

  /** 跳转审计中心 */
  const to_page = (approveType: string) => {
    router.reLaunch(config.route.approve + '?approveType=' + approveType);
  };

  /** 图标样式 */
  const analysisStyle = (logo: string) => {
    const iconStyle = {
      background: JSON.parse(logo).background,
      fontSize: '38px',
      color: '#fff',
    };
    return iconStyle;
  };

  /** 跳转表单 */
  const to_form = (form: WflowModel) => {
    if (isEmpty(form.processDefId)) {
      Toast('该流程还未发布😥');
      return;
    }
    router.push(config.route.initiateProcess + '?code=' + form.formId + '&title=' + form.formName);
  };

  // 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）
  onLoad(() => {
    // 加载首页数据
    loadData(() => {});
  });

  // 当 uni-app 启动，或从后台进入前台显示
  onShow(() => {});

  // 下拉刷新
  onPullDownRefresh(() => {
    loadData(() => {
      uni.stopPullDownRefresh();
    });
  });
</script>

<style scoped lang="scss">
  .grid_text {
    word-break: break-all;
    // white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 8rpx;

    font-size: 24rpx;
    color: #000000;
    line-height: 1.3;
    text-align: center;
    height: 60rpx;
    // width: 160rpx;
  }

  ::v-deep .van-grid-item__content {
    padding: 4rpx 16rpx;
  }
</style>
